<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">

      <!-- 头部导航搜索添加等 -->


      <el-select v-model="listQuery.sort" style="width: 140px; margin-left: 10px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>

      <el-select v-model="listQuery.peop" style="width: 140px; margin-left: 10px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in opop_arr" :key="item.id" :label="item.real_name" :value="item.id" />
      </el-select>



    </div>

    <!-- 列表主体 -->
    <el-table

      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    ><!--  -->
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人"  align="center">
        <template slot-scope="{row}">
          <span>{{ row.admin_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <span>{{ row.msg }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ip" align="center">
        <template slot-scope="{row}">
          <span>{{ row.ip }}</span>
        </template>
      </el-table-column>

      <el-table-column label="录入时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>


    </el-table>

    <!-- 分页 -->
    <pagination v-show="total>0" :page-sizes="pagesizes" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="list" />

    <!-- 添加修改 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="top" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>

        <el-form-item label="状态" prop="address">
          <el-select v-model="temp.type" style="width: 140px" class="filter-item">
            <el-option
              v-for="item in affix2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 引入api
import api from '@/api/system/runtime.js'
import number from '@/api/jurisdiction/number'

// 引入分页
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      // 分页
      total: 0,
      pagesizes: [10, 30, 60, 100],
      // 数据
      tableData: [],
      // 提交数据
      temp: {

      },
      // 应有数据
      temp_: {

      },
      opop_arr:[
        {
          id:0,
          real_name:'全部'
        }
      ],
      // 判定加载
      loading: false,
      // 判定where
      listQuery: {
        page: 1,
        limit: 10,
        title: null,
        sort: 'desc',
        peop:0
      },
      // 判定显示
      dialogFormVisible: false,
      // 判定修改or添加
      dialogStatus: '',
      // 判定修改id
      up_id: 0,
      // 列表匹配数据群
      textMap: {
        update: '修改',
        create: '添加'
      },
      affix2: [
        {
          value: 0,
          label: '保留'
        },
        {
          value: 1,
          label: '不保留'
        }
      ],
      show: [
        {
          value: 0,
          label: '展示'
        },
        {
          value: 1,
          label: '不展示'
        }
      ],
      sortOptions: [
        { label: 'ID 升序', key: 'asc' },
        { label: 'ID 降序', key: 'desc' }
      ]
    }
  },
  // 进入页面加载数据
  created() {
    this.list()
    this.getnumber()
  },
  methods: {
    // 删除
    handleDelete(row, index, id) {
      this.$confirm('此操作将永久删除该路由, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      //    this.loading = true
      //   api.deltree({
      //     token: localStorage.getItem('token'),
      //     id: id
      //   }).then(() => {
      //     // this.list.unshift(this.temp)
      //      this.loading = false
      //     this.list()
      //     this.dialogFormVisible = false
      //     this.$notify({
      //       title: '提示',
      //       message: '删除成功',
      //       type: 'success',
      //       duration: 2000
      //     })
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      })
    },
    // 修改
    updateData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      // api.updatetree({
      //   token: localStorage.getItem('token'),
      //   id: this.up_id,
      //   temp: this.temp
      // }).then(res => {
      //   this.list()
      //   this.dialogFormVisible = false
      //   // router.addRoutes(res)
      // }).catch((res) => {
      //   console.log('22222')
      //   than.loading = false
      //
      // })
    },
    // 添加
    createData() {
      this.loading = true
      var than = this
      console.log(this.temp)
      // api.addtree({
      //   token: localStorage.getItem('token'),
      //   temp: this.temp
      // }).then(res => {
      //   this.list()
      //   this.dialogFormVisible = false
      //   // router.addRoutes(res)
      // }).catch((res) => {
      //   console.log('22222')
      //   than.loading = false
      //
      // })
    },
    // 还原提交数据
    resetTemp() {
      for (var key in this.temp) {
        delete this.temp[key]
      }
    },
    // 添加前钩子
    handleCreate(pid) {
      this.resetTemp(pid)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改前钩子
    handleUpdate(row) {
      this.up_id = row.id
      this.temp = Object.assign({}, row) // copy obj
      console.log(this.temp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 获取列表
    list(title) {
      this.loading = true
      var than = this
      api.getlist({
        listQuery: this.listQuery
      }).then(res => {
        than.tableData = res.data.list
        than.total = res.data.count

        than.loading = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    },
    getnumber(){
      this.loading = true
      var than = this
      number.list({
        listQuery: {
          page:0,
          limit:0,
          sort: 'asc'
        }
      }).then(res => {
        than.opop_arr = [
          ...than.opop_arr,
          ...res.data.list

        ]


        than.loading = false
        // router.addRoutes(res)
      }).catch((res) => {
        console.log('22222')
        than.loading = false
      })
    },
    // 排序
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = 'asc'
      } else {
        this.listQuery.sort = 'desc'
      }
      this.handleFilter()
    },
    // 还原数据
    handleFilter() {
      this.listQuery.page = 1
      this.list()
    }
  }
}
</script>
